<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>blog</title>
    <link rel="stylesheet" href="../css/reset.css"/>
    <link rel="stylesheet" href="../css/common.css"/>
    <script src="../js/angular-1.4.6.min.js"></script>
    <script type="text/javascript" src="../js/jquery-1.8.3.min.js"></script>
    <style>
        .s-title{cursor: default;}
        .s-title .text-uppercase{line-height: 60px;font-size: 16px;color: #6c6b6b;overflow: hidden;text-align: right;}
        .s-title .text-uppercase span{display: inline-block;margin-left: 20px;vertical-align: middle;}
        .s-title .text-uppercase span img{}
        .s-title .s-box1,.s-title .s-box2{background-color: #ccc;padding: 20px 0;display: none;clear: both;}

        .content{margin-top: 20px;}
        .content .article{width: 865px;}
        .content .article .img-box{position: relative;}
        .content .article .img-box .bg{display: block;width: 100%;}
        .content .article .img-box .time{position: absolute;left: 10px;top: 10px;line-height: normal;font-size: 14px;font-weight: bold;background-color: #c4261d;color: #fff;padding: 5px 20px;}
        .content .article .img-box .top-title{position: absolute;width: 160px;text-align: center;top: 10px;right: 10px;font-size: 12px;line-height: 30px;color: #fff;background-color: #c4261d;}
        .content .article .img-box .face{position: absolute;bottom: 20px;left: 10px;overflow: hidden;}
        .content .article .img-box .face img{display: block;width: 55px;height: 55px;border-radius: 55px;float: left;}
        .content .article .img-box .face span{line-height: 55px;color: #fff;background-color: #c4261d;font-size: 14px;font-weight: bold;
            padding: 5px 10px;margin-left: 10px;}
        .content .article .art-con{}
        .content .article .art-con .art-title{font-size: 26px;margin: 25px 0;}
        .content .article .art-con .art-words p{color: #5e5d5d;margin-bottom: 20px;text-align: justify;}
        .content .article .comment{}
        .content .article .comment .com-title{font-size: 14px;color: #999;}
        .content .article .comment .com-title span{display: inline-block;border-bottom: 1px solid #ccc;line-height: 30px;}
        .content .article .comment .com-box{padding: 10px;background-color: #f8f8f8;margin-top: 20px;}
        .content .article .comment .com-box p{line-height: 40px;font-size: 14px;color: #5e5d5d;}
        .content .article .comment .com-box textarea{display: block;width: 100%;resize: none;border: 1px solid #dcdcdc;padding: 10px 0;text-indent: 10px;outline: none;}
        .content .article .comment .com-box img{width: 30px;height: 30px;border-radius: 30px;}
        .content .article .comment .com-box input{width: 800px;border: 1px solid #dcdcdc;height: 28px;margin-bottom: 15px;text-indent: 10px;}
        .content .article .comment .submit{width: 80px;height: 35px;line-height: 35px;margin: 10px auto;clear: both;}
        .content .article .msg{margin-top: 30px;}
        .content .article .msg .m-title{font-size: 14px;color: #999;}
        .content .article .msg .m-title span{display: inline-block;border-bottom: 1px solid #ccc;line-height: 30px;}
        .content .article .msg ul{margin-top: 20px;}
        .content .article .msg ul li{background-color: #f8f8f8;margin-bottom: 10px;padding: 15px;}
        .content .article .msg ul li p{font-size: 14px;color: #5e5d5d;}
        .content .article .msg ul li p span{color: #5e5d5d;}

        .content .news{width: 315px;}
        .content .news .n-title{text-align: center;}
        .content .news .n-title span{display: inline-block;font-weight: bold;border-bottom: 1px solid #c8c8c8;padding-bottom: 5px;letter-spacing: 0;font-size: 26px;}
        .content .news ul{margin-top: 30px;}
        .content .news ul li{position: relative;margin-bottom: 25px;}
        .content .news ul li img{display: block;width: 100%;}
        .content .news ul li .time{position: absolute;left: 8px;top: 8px;font-size: 14px;background-color: #c4261d;color: #fff;padding: 5px 20px;}
        .content .news ul li .bottom{position: absolute;bottom: 0;left: 0;width: 100%;padding: 5px 0;background-color: rgba(196, 38, 29, 0.59);}
        .content .news ul li .bottom p{padding: 0 10px;}

    </style>
</head>
<body ng-app="">
<!--公共头部-->
<div ng-include="'../html/header.html'"></div>
<div class="bread container-fluid">
    <div class="container clear">
        <div class="fl path">
            <p class="fs-18"><em>You are here:&nbsp;</em><a href="" class="text-capitalize">Home</a>&nbsp;>&nbsp;<span class="bold red text-capitalize">blog</span></p>
        </div>
        <div class="fr">
            <div class="btn b-red white fs-14 bold">JUMP TO<img src="../img/vimostsports（About-Us-）_03.jpg" alt=""/></div>
            <ul class="list fs-14 text-capitalize">
                <li>
                    <a href="">about us</a>
                </li>
                <li>
                    <a href="">gallery</a>
                </li>
                <li>
                    <a href="">sublimation</a>
                </li>
                <li>
                    <a href="">how to order</a>
                </li>
                <li>
                    <a href="">order process</a>
                </li>
                <li>
                    <a href="">fabric guide</a>
                </li>
                <li>
                    <a href="">blog</a>
                </li>
                <li>
                    <a href="">FAQS</a>
                </li>
                <li>
                    <a href="">customer reviews</a>
                </li>
                <li>
                    <a href="">contact us</a>
                </li>
            </ul>
        </div>
    </div>
</div>
<div class="s-title clear">
    <div class="text-uppercase container">refine posts:<span class="select1">categories <img src="../img/vimostsports（blog）_05.png" alt=""/></span><span class="select2">date <img src="../img/vimostsports（blog）_05.png" alt=""/></span></div>
    <div class="s-box1 container-fluid"></div>
    <div class="s-box2 container-fluid"></div>
</div>

<div class="content container clear">
    <div class="article fl">
        <div class="img-box">
            <img class="bg" src="../img/vimostsports（blog)-xiangqingye_03.png" alt=""/>
            <div class="time text-uppercase">june 6<br>2016</div>
            <div class="top-title text-overflow">vimostsports new</div>
            <div class="face">
                <img src="../img/vimostsports（blog）_35.png" alt=""/>
                <span>ALEX</span>
            </div>
        </div>
        <div class="art-con">
            <p class="art-title text-capitalize red">about usout us blog about</p>
            <div class="art-words fs-14">
                <p>about us blog about us blog about us blog about us blog about about us blog about us blog about us blog about us blog about about us blog about us blog about us blog about us blog about about us blog about us blog about us blog about us blog about about us blog about us blog about us blog about us blog about about us blog about us blog about us blog about us blog about </p>
                <p>about us blog about us blog about us blog about us blog about about us blog about us blog about us blog about us blog about about us blog about us blog about us blog about us blog about about us blog about us blog about us blog about us blog about about us blog about us blog about us blog about us blog about </p>
            </div>
        </div>
        <div class="comment">
            <p class="com-title"><span>Leave a Reply</span></p>
            <div class="com-box clear">
                <textarea placeholder="Enter your conment here!"></textarea>
                <p>Fill in your details below:</p>
                <img class="fl" src="../img/vimostsports（blog)-xiangqingye_16.png" alt=""/>
                <input class="fr" type="text" placeholder="Email(required)"/>
                <input class="fr" type="text" placeholder="Name(required)"/>
                <div class="submit b-red white text-center">SUBMIT</div>
            </div>
        </div>
        <div class="msg">
            <p class="m-title"><span>Comment</span></p>
            <ul>
                <li>
                    <p><span class="time">2016-5-21</span><span class="name text-capitalize">jamie</span></p>
                    <p>I like the designI like the design I like the design I like the design I like the design I like the design  </p>
                </li>
                <li>
                    <p><span class="time">2016-5-21</span><span class="name text-capitalize">jamie</span></p>
                    <p>I like the designI like the design I like the design I like the design I like the design I like the design  </p>
                </li>
                <li>
                    <p><span class="time">2016-5-21</span><span class="name text-capitalize">jamie</span></p>
                    <p>I like the designI like the design I like the design I like the design I like the design I like the design  </p>
                </li>
            </ul>
        </div>
    </div>

    <div class="news fr">
        <p class="n-title"><span class="text-uppercase">recent news</span></p>
        <ul>
            <li>
                <img src="../img/xinwen-1.jpg" alt=""/>
                <p class="time text-uppercase bold">june 6<br>2016</p>
                <div class="bottom"><p class="white fs-14">from check...</p></div>
            </li>
            <li>
                <img src="../img/xinwen-2.jpg" alt=""/>
                <p class="time text-uppercase bold">june 6<br>2016</p>
                <div class="bottom"><p class="white fs-14">from check...</p></div>
            </li>
            <li>
                <img src="../img/xinwen-3.jpg" alt=""/>
                <p class="time text-uppercase bold">june 6<br>2016</p>
                <div class="bottom"><p class="white fs-14">from check...</p></div>
            </li>
        </ul>
    </div>
</div>
<!--公共底部-->
<div ng-include="'../html/footer.html'"></div>
</body>
<script>
    var nav = setTimeout(function(){
        $('.nav li').eq(4).find('.nav-item').addClass('b-red').attr('href','javascript:void(0);');
    },0);
    $(function(){
        $('.select1').click(function(){
            $('.s-title .text-uppercase span').css('color','');
            $(this).css('color','#c4261d');
            $('.s-box1').slideToggle();
            $('.s-box2').slideUp();
        });
        $('.select2').click(function(){
            $('.s-title .text-uppercase span').css('color','');
            $(this).css('color','#c4261d');
            $('.s-box2').slideToggle();
            $('.s-box1').slideUp();
        })
    })
</script>
<script src="../js/scroll_top.js"></script>
</html>